import {
    Form, RadioGroup, RadioButton,
    ColorPicker,
    Input,
    Option,
    Select,
    Switch,
    Cascader,
    InputNumber,
    FormItem,
    Popover
} from 'element-ui'
import { mapGetters } from 'vuex'
// import { useVisualData } from '@/visual-editor/hooks/useVisualData'
// import { FormatInputNumber } from '@/visual-editor/components/common/format-input-number'
// import { ConfigProp } from './components'
import { createDotProp, editorPropsMap } from '@utils/editor-props'

import { visualConfig } from '@editor/editor.config'
import './index.scss'


let componentMap = visualConfig.componentMap;

export const AttrEditor = {
    name: 'AttrEditor',
    data() {
        return {
            curBlock: null,
        }
    },
    computed: {
        ...mapGetters('editor', ['focusBlock']),
        compConf({ focusBlock }) {
            return focusBlock ? componentMap[focusBlock.componentKey] : null;
        },
        showFlag({ focusBlock }) {
            return focusBlock && componentMap[focusBlock.componentKey] && componentMap[focusBlock.componentKey].props;
        }
    },
    watch: {
        focusBlock(v) {
            console.log(v, '-=-=-=-=-=')
        }
    },
    methods: {
        renderID() {
            return (
                <FormItem label="组件ID" labelWidth={'76px'}>
                    {this.focusBlock?.uuid}
                </FormItem>
            )
        },
        renderPropItem(propName, propConfig) {
            const { propObj, prop } = createDotProp(this.focusBlock.props, propName)
            propObj[prop] ??= propConfig.defaultValue
            return ({
                [editorPropsMap.input]: () => {
                    if (!Object.is(propObj[prop], undefined) && !Object.is(propObj[prop], null)) {
                        propObj[prop] = `${propObj[prop]}`
                    }
                    return (
                        <Input v-model={propObj[prop]} placeholder={propConfig.tips || propConfig.label} />
                    )
                },
                [editorPropsMap.inputNumber]: () => {
                    const parseRes = parseFloat(propObj[prop])
                    propObj[prop] = Number.isNaN(parseRes) ? 0 : parseRes
                    return <InputNumber v-model={propObj[prop]} />
                },
                [editorPropsMap.switch]: () => <Switch v-model={propObj[prop]} />,
                [editorPropsMap.color]: () => <ColorPicker v-model={propObj[prop]} />,
                [editorPropsMap.crossSortable]: () => (
                    <SortableProp
                        v-model={propObj[prop]}
                        multiple={propConfig.multiple}
                        showItemPropsConfig={propConfig.showItemPropsConfig}
                    />
                ),
                [editorPropsMap.select]: () => (
                    <Select v-model={propObj[prop]} valueKey={'value'} multiple={propConfig.multiple}>
                        {propConfig.options?.map((opt) => (
                            <Option label={opt.label} style={{ fontFamily: opt.value }} value={opt.value} />
                        ))}
                    </Select>
                ),
                [editorPropsMap.table]: () => (
                    <TablePropEditor v-model={propObj[prop]} propConfig={propConfig} />
                ),
                [editorPropsMap.modelBind]: () => (
                    <Cascader
                        clearable={true}
                        props={{
                            checkStrictly: true,
                            children: 'entitys',
                            label: 'name',
                            value: 'key',
                            expandTrigger: 'hover'
                        }}
                        placeholder="请选择绑定的请求数据"
                        v-model={propObj[prop]}
                        options={models.value}
                    ></Cascader>
                )
            }[propConfig.type]()
            )
        },
        renderConfig() {
            const models = []
            const itemList = Object.entries(this.compConf.props ?? {});
            return (
                itemList.map(([propName, propConfig]) => (
                    <FormItem
                        key={this.compConf.uuid + propName}
                        style={
                            propConfig.labelPosition == 'top'
                                ? {
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'flex-start'
                                }
                                : {}
                        }
                        label={propConfig.label}
                    >
                        {
                            this.renderPropItem(propName, propConfig)
                        }
                    </FormItem>
                ))
            )
        },
        renderStyleConf() {
            return (
                <FormItem label={'组件对齐方式'} labelWidth={'90px'}>
                    <RadioGroup v-model={this.focusBlock.styles.justifyContent} size="mini">
                        <RadioButton label="flex-start">{'左对齐'}</RadioButton>
                        <RadioButton label="center">{'居中'}</RadioButton>
                        <RadioButton label="flex-end">{'右对齐'}</RadioButton>
                    </RadioGroup>
                </FormItem>,
                <FormItem class={'flex flex-col justify-start'}>
                    {/* {{
                          label: () => (
                            <div class={'flex justify-between mb-2'}>
                              <div>组件内边距</div>
                              <FormatInputNumber v-model={compPadding.value} class={'!w-100px'} />
                            </div>
                          ),
                          default: () => (
                            <div
                              class={'grid grid-cols-3 gap-2 w-full bg-gray-100 p-20px items-center'}
                            >
                              <FormatInputNumber
                                v-model={currentBlock.value.styles.paddingTop}
                                class={'!w-100px col-span-full col-start-2'}
                              />
                              <FormatInputNumber
                                v-model={currentBlock.value.styles.paddingLeft}
                                class={'!w-100px col-span-1'}
                              />
                              <div class={'bg-white col-span-1 h-40px'}></div>
                              <FormatInputNumber
                                v-model={currentBlock.value.styles.paddingRight}
                                class={'!w-100px col-span-1'}
                              />
                              <FormatInputNumber
                                v-model={currentBlock.value.styles.paddingBottom}
                                class={'!w-100px col-span-full col-start-2'}
                              />
                            </div>
                          )
                        }} */}
                </FormItem>
            )
        },
    },
    render() {
        const { focusBlock, showFlag } = this;
        return (
            <Form size="mini" labPosition={'left'}>
                {
                    this.renderID()
                }
                {
                    showFlag && this.renderConfig()
                }
                {
                    showFlag && this.renderStyleConf()
                }
            </Form>
        )
    },
}
